<template>
  <div>
    <!-- 课程发布页面：收集课程信息页面
    引入收集课程数据的三个子页面切换显示  收集每一步的数据 -->
    <!-- 标题 -->
    <h2 style="text-align:center">发布新课程</h2>
    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="发布课程" />
    </el-steps>
    <!-- 根据收集课程数据的步骤  切换显示指定的子页面 -->
    <!--
        vue页面中引入子页面，自定义标签的使用：(elemntui的自定义标签)

        步骤：
          1、import引入需要使用的vue页面
          2、将引入的vue页面的别名注册给vue对象
          3、在页面中就可以使用别名 对应的标签名  将它当做自定义标签使用

     -->
    <!-- 当active的值为0时 引入CourseInfo页面到此处 收集第一步的课程基本信息 -->
    <course-info v-if="active===0"/>
    <!-- 当active的值为1时 引入CourseChapter页面到此处 收集第2步的课程大纲 -->
    <course-chapter v-if="active===1"/>
    <!-- 当active的值为2时 引入CoursePublish页面到此处 提交发布课程请求 -->
    <course-publish v-if="active===2|| active===3"/>
  </div>
</template>
<script>
import CourseInfo from '@/views/course/components/CourseInfo'
import CourseChapter from '@/views/course/components/CourseChapter'
import CoursePublish from '@/views/course/components/CoursePublish'
export default {
  components: { // 给vue注册自定义组件标签
    CourseInfo, CourseChapter, CoursePublish
  },
  data() {
    return {
      courseId: '',
      active: 0
    }
  }
}
</script>

